<template>
  <div class="container">
    <div class="header">
      <span class="Data_font">模型管理</span>
      <div class="header-right">
        <el-dropdown>
          <span class="user_icon">
            <img src="../../../../assets/images/user-icon.png" />
          </span>
          <el-dropdown-menu
            @click.native="handleUserSetting('loginout')"
            style="font-size: 12px; padding: 0.625rem 1.25rem; cursor: pointer"
          >
            退出登录
          </el-dropdown-menu>
        </el-dropdown>
        <alarm-icon></alarm-icon>
      </div>
    </div>
    <div class="main eventMain">
      <div class="main-header">
        <div class="btn_setion">
          <el-button type="primary" plain @click="createData"
            >导入模型</el-button
          >
        </div>
        <div class="ipt_section">
          <el-input placeholder="请输入名称搜索" v-model="tableDataName"  class="input-with-select">
            <el-button slot="append" icon="el-icon-search" @click="doFilter"></el-button>
          </el-input>
          <div
            class="setting-icon el-icon-refresh-left"
            @click="getTableData"
          ></div>
        </div>
      </div>
      <!-- 表格区域 -->
      <el-table
        tooltip-effect="dark"
        :header-cell-style="{
          color: '#131416',
          fontsize: '0.875rem',
          fontWeight: 'Bold',
          fontFamily: 'Microsoft YaHei, Microsoft YaHei-Bold',
          backgroundColor: '#F8F8F8',
          height: '2.5rem',
        }"
        :row-style="{ height: '3.375rem' }"
        :cell-style="{}"
        border
        :data="tableList"
        style="
          margin-top: 2.5rem;
          margin-bottom: 1.875rem;
          border: 1px solid #e6e6e6;
          border-radius: 2px;
        "
        @selection-change="handleSelectionChange"
        v-loading="loading"
      >
        <el-table-column
          prop="model_name"
          label="模型名称"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="model_type"
          label="模型类型"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="create_time"
          label="创建时间"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>{{
              scope.row.create_time | dataFormat('YYYY/MM/DD HH:mm:ss')
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="model_status"
          label="模型状态"
          show-overflow-tooltip
        >
        </el-table-column>
         <el-table-column
          prop="model_source"
          label="模型来源"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="model_version"
          label="模型版本"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              @click="deleteDataset(scope.row)"
              type="text"
              size="small"
              class="buttonLine"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 50, 100, 150, 200]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
        v-if="totalCount > 0"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import alarmIcon from '../../../../components/alarmIconComponent/alarmIconComponent.vue';
export default {
  components: {
    alarmIcon,
  },
  data() {
    return {
      ids: '',
      tableList: [],
      // 默认每页数据量
      pageSize: 10,
      // 当前页码
      currentPage: 1,
      // 默认数据总数,表格的分页
      totalCount: 0,
      multipleSelection: [],
      pkArchivingStore: '',
      dialogFormVisible: false,
      standardRadio: false,
      lowerRadio: false,
      fileRadio: false,
      loading: false,
      content: [],
      index: null,
      inputvalue: '',
      inputvalue1: '',
      inputid: '',
      tableDataName: '',
    };
  },
  created() {
    this.getTableData();
  },
  methods: {
    // 获取表格数据
    getTableData() {
      this.loading = true;
      this.$url
        .get(
          `data/train/model?page=${this.currentPage}&page_size=${this.pageSize}`
        )
        .then((res) => {
          if (res.status === 200) {
            this.tableList = res.data.data.data_list;
            this.totalCount = res.data.data.count;
            this.modelOptions.forEach((g, index) => {
              let obj = {};
              g.options = g.options.reduce((newArr, m) => {
                obj[m.label] ? '' : (obj[m.label] = true && newArr.push(m));
                return newArr;
              }, []);
              return g.options;
            });
          }
          this.loading = false;
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    // 导入模型
    createData() {
      this.$router.push({
        path: '/ImportModel',
      });
    },
      // 表格选中与否事件 
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
    // 搜索事件
    doFilter(){
      let params = {
        page: this.currentPage,
        pageSize: this.pageSize, 
        'model_name':this.tableDataName
      };
      this.$url.get('data/train/model', { params }).then(res => {
        if (res.status === 200) {
          this.tableList = res.data.data.data_list;
          this.totalCount = res.data.data.count;
        }
      });
    },
    // 模型删除
    deleteDataset(pk) {
      this.$confirm('确定删除此数据？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.$url
            .delete('data/train/model',{
              data:{'model_id':pk.model_id}
            })
            .then((res) => {
              if (res.status === 204) {
                this.$message.success('删除数据成功');
                this.getTableData();
              } else {
                this.$message.error('删除失败');
              }
            });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          });
        });
    },
    // 分页
    handleSizeChange(val) {
      this.pageSize = val;
      this.getTableData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getTableData();
    },
    // 退出登录
    handleUserSetting(command) {
      if (command === 'loginout') {
        this.$url.post('logout').then((res) => {
          if (res.status === 200) {
            this.$message.success('退出成功');
            this.$router.push({ path: '/Login' });
            this.$stor.del('X-CSRFToken');
          }
        });
      }
    },
  },
};
</script>

<style
  lang="less"
  src="../../../../assets/css/anonymizeDataPageStyle.less"
></style>
<style lang="less" scoped>
.ipt_section{
  width: 480px;
  height: 30px;
  display: flex;
  .rightSearch{
    position: relative;
    left: -30px;
    top: 5px;
  }
  .setting-icon{
    width: 35px!important;
    height: 35px!important;
  }
}
</style>
